<template>
	<view class="content">
		<view class="search">
			<uni-search-bar
				v-model="searchValue"
				class="uni-mt-10"
				radius="100"
				placeholder="搜索"
				clearButton="none"
				cancelButton="none"
				@confirm="search"
			/>
		</view>
		<view class="post">
			<uni-section title="用户帖子" type="line">
				<view v-if="!isLoading" class="post-content">
					<template v-for="item in postsList" :key="item.id">
						<PostItem :post="item" />
					</template>
				</view>
			</uni-section>
		</view>
		<uni-load-more v-if="isLoading" class="loading" status="loading" />
		<van-empty description="暂无帖子" v-if="!postsList.length" />
		<uni-fab ref="fab"  horizontal="right" vertical="bottom"  @fabClick="fabClick" />
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { onReachBottom } from '@dcloudio/uni-app'

import PostItem from '@/components/post-item/post-item.vue'
import ActivityItem from '@/components/activity-item/activity-item.vue'
import useHomeStore from '@/store/home.js'
import useEventStore from '@/store/event.js'

/** 帖子相关 */
const homeStore = useHomeStore()
const limit = ref(5 )
const { postsList } = storeToRefs(homeStore)
onMounted(() => {
	homeStore.getPostsAction({ limit: limit.value })
})

onReachBottom(() => {
	limit.value = limit.value + 5
	homeStore.getPostsAction({limit: limit.value})
})
// 搜索帖子
const searchValue = ref('')
// 控制加载是否显示
const isLoading = ref(false)
async function search() {
	isLoading.value = true
	await homeStore.getPostsAction({ title: searchValue.value })
	console.log(postsList.value.length)
	isLoading.value = false
}

function fabClick() {
	uni.navigateTo({
		url:'/pages/publish-post/publish-post'
	})
}


</script>

<style lang="less">
.search {
	position: relative;
	background-color: #fff;
}
.card-actions {
	display: flex;
	justify-content: space-between;
	border-top: 2px solid #f2f2f2;
}
.post {
	padding: 0 10rpx;
	.post-content {
		background-color: #F5F6F8;
	}
}
.loading {
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
}
</style>
